<template>
  <div class="row-detail">
    <div class="header">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="1"></el-tab-pane>
        <el-tab-pane label="请求头" name="2"></el-tab-pane>
        <el-tab-pane label="输入参数" name="3"></el-tab-pane>
        <el-tab-pane label="输出参数" name="4"></el-tab-pane>
        <el-tab-pane label="版本清单" name="5" v-if="false"></el-tab-pane>
        <el-tab-pane label="编排图" name="6"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="body">
      <el-form v-if="activeName === '1'">
        <el-row>
          <el-col :span="10">
            <el-form-item label="能力名称:">
              {{ fbOptions.formData.serviceName }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="能力编码:">
              {{ fbOptions.formData.serviceCode }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="所属分类:">
              {{ fbOptions.formData.cateName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="服务主版本:">
              {{ "V" + fbOptions.formData.serviceMasterVersion }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="服务状态:">
              <status-tag :status="fbOptions.formData.serviceStatus" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="能力描述:">
              {{ fbOptions.formData.serviceDesc }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="10">
            <el-form-item label="能力类型:">
              {{ selectDictLabel(fbOptions.protocolTypeList, fbOptions.formData.serviceType) }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="请求方式:">
              {{ fbOptions.formData.httpRequestMethod }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="请求路径:">
              {{ fbOptions.formData.mockUrl }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="fbOptions.formData.serviceType === '3'">
          <el-col :span="10">
            <el-form-item label="JMS数据源：">
              {{ fbOptions.formData.jmsDatasourceCode }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="消息类型：">
              {{ fbOptions.formData.jmsType === "queue" ? "Queue" : "Topic" }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="fbOptions.formData.serviceType === '3'">
          <el-col :span="10">
            <el-form-item
              :label="
                fbOptions.formData.jmsType === 'queue' ? 'Queue名称：' : 'Topic名称：'
              "
            >
              {{ fbOptions.formData.jmsDestinationName }}
            </el-form-item>
          </el-col>
          <!-- <el-col :span="10">
            <el-form-item label="消息类型：">
              {{ fbOptions.formData.jmsRole === 'C' ? '消费者' : '生产者' }}
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="限流开关:">
              {{ fbOptions.formData.limitCtrlStatus === "0" ? "开" : "关" }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="限流方式:">
              {{ fbOptions.formData.limitCtrlType === "1" ? "QPS" : "线程数" }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="限流阈值:">
              {{ fbOptions.formData.limitCtrlParamval }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="预警响应时间:">
              {{ fbOptions.formData.alarmSecs + " 秒" }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="超时时间:">
              {{ fbOptions.formData.timeoutSecs + " 秒" }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="失败重试次数:">
              {{ fbOptions.formData.alarmSecs }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="创建人:">
              {{ fbOptions.formData.createBy }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="创建时间:">
              {{ fbOptions.formData.createTime }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="更新人:">
              {{ fbOptions.formData.updateBy }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="更新时间:">
              {{ fbOptions.formData.updateTime }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <step-qqt v-if="activeName === '2'"  :fb-options="fbOptions" :form-data="fbOptions.formData"/>
      <step-srcs v-if="activeName === '3'" :fb-options="fbOptions" :form-data="fbOptions.formData"/>
      <step-sccs v-if="activeName === '4'"  :fb-options="fbOptions" :form-data="fbOptions.formData"/>
      <template v-if="activeName === '5'">
        <el-table style="margin: 10px 0" row-key="nodeId" :data="versionList">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="版本号" prop="serviceVerId">
            <template #default="scope">
              <div>
                <span>{{
                  scope.row.serviceVersion ? `V${scope.row.serviceVersion}` : ""
                }}</span>
                <el-tag
                  size="mini"
                  v-if="row.serviceMasterVersion === scope.row.serviceVersion"
                  >主</el-tag
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="版本描述"
            prop="serviceVerDesc"
            show-overflow-tooltip
            min-width="150"
          />
          <el-table-column
            label="请求方式"
            align="center"
            width="80"
            prop="httpRequestMethod"
          />
          <el-table-column label="状态" align="center" width="80">
            <template #default="scope">
              <status-tag :status="scope.row.serviceStatus" />
            </template>
          </el-table-column>
          <el-table-column label="更新者" prop="updateBy" />
          <el-table-column label="更新时间" prop="updateTime" />
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="handleClick"
        />
        <div style="height: 16px"></div>
      </template>
      <step-nlbp isView v-if="activeName === '6'" :disabled="disabled" :fb-options="fbOptions" :form-data="fbOptions.formData"/>
    </div>
  </div>
</template>

<script>
// import { mapState } from "vuex";
import { searchVersion } from "@slc/api/slc/inventory";

import StatusTag from "./status-tag.vue";
import StepQqt from "./step-qqt.vue";
import StepSrcs from './step-srcs.vue';
import StepSccs from './step-sccs.vue';

export default {
  components: {
    StatusTag,
    StepQqt,
    StepSrcs,
    StepSccs,
    // StepNlbp: () => import("../nlbp"),
  },
  name: "row-details",
  props: {
    fbOptions: {
      type: Object,
      default: () => {},
    }
  },
  data() {
    return {
      activeName: "1",
      versionList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      disabled: false
    };
  },
  computed: {
  },
  watch: {
    visible(val) {
      if (!val) {
        this.activeName = "1";
      }
    },
  },
  methods: {
    async handleClick() {
      if (this.activeName === "5") {
        const res = await searchVersion({
          ...this.queryParams,
          serviceId: this.fbOptions.formData.serviceId,
        });
        this.versionList = res.data.list || [];
        this.total = res.data.total;
      }else if(this.activeName === '7'){
        this.disabled = true
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.row-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  .header {
    height: 54px;
  }
  .body {
    flex: 1;
  }
}
.el-form-item {
  margin-bottom: 0px;
}
</style>
